<template>
  <div class="app-container">
    <div class="filter-container" align="left">
      <!-- <el-input placeholder="请输入姓名搜索" style="width: 200px;margin: 0 5px;" class="filter-item" v-model="search" />
      <el-button class="filter-item" type="primary" size="medium" icon="el-icon-search" @click="searchByName_"
        style="margin: 0 5px;">
        搜索
      </el-button> -->
    </div>
    <!-- 表格 -->
    <el-table :data="deliverList" style="width: 100%">
      <el-table-column label="序号" align="center" width="100">
        <template slot-scope="scope">
          <span>{{ scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column label="姓名" align="center" width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.deliverName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="手机号" align="center" width="180">
        <template slot-scope="scope">
          <span>{{ scope.row.deliverPhone }}</span>
        </template>
      </el-table-column>
      <el-table-column label="城市" align="center" width="150">
        <template slot-scope="scope">
          <span>{{ scope.row.deliverCity }}</span>
        </template>
      </el-table-column>
      <el-table-column label="地址" align="center" width="280">
        <template slot-scope="scope">
          <span>{{ scope.row.deliverAddress }}</span>
        </template>
      </el-table-column>
      <el-table-column label="送养宠物" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.petName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="宠物图片" align="center">
        <template slot-scope="scope">
          <img width="40px" :src="scope.row.petImg" alt="">
        </template>
      </el-table-column>
    </el-table>
    <div class="paging" style="float: right;">
      <el-pagination :page-size="10" background layout="prev, pager, next" :total="10">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { selectAll, searchByName } from '../../api/personmanage/deliverperson.js'
export default {
  data() {
    return {
      deliverList: [
        {
          petId: 1,
          deliverName: '张三',
          deliverPhone: 110,
          deliverCity: '西安',
          deliverAddress: '陕西省西安市雁塔区一团乱麻路3号',
          petName: '小黑',
          petImg: "https://img0.baidu.com/it/u=420862062,2718911735&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
        },
      ],
      updateId: null,
      dialogFormVisible: false,
      formLabelWidth: '100px',
      dialogStatus: '',
      search: '',
    }
  },
  methods: {
    // 根据姓名查询
    async searchByName_() {
      let res = await searchByName(this.search);
      console.log(res)
      this.deliverList = res.data;
    },
    // 查询所有
    async selectAll_() {
      let res = await selectAll();
      console.log(res);
      this.deliverList = res.data
    },
  },
  created() {
    this.selectAll_()
  },
}
</script>
<style></style>